let myChart = echarts.init(document.getElementById('p1'));
// 指定图表的配置项和数据
let options = {
  option2: {
    title: {
      text: '年级分布'
    },
    tooltip: {},
    xAxis: {
      data: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三"],
      axisLabel: {
        inside: false,
        textStyle: {
          color: '#000',
          fontSize: '18',
          itemSize: ''
        }
      }
    },
    yAxis: {
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    series: [{
      name: '人数',
      type: 'bar',
      data: [68386, 68693, 70069, 75840, 80377, 80414, 79780, 75118, 71096, 49588, 44298, 36341],
      label: {
        show: true,
        position: "top"
      },
    }]
  },
  option3: {
    title: {
      text: '使用设备/材料'
    },
    grid: {
      left: "18%",
    },
    tooltip: {},
    xAxis: {
      type: "value",
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      },
    },
    yAxis: {
      realtimeSort: true,
      inverse: true,
      data: ["电视", "台式电脑或笔记本电脑", "平板", "手机", "音频（广播、录音）", "纸质学习材料"],
      axisLabel: {
        inside: false,
        color: '#000',
        fontSize: '18',
        itemSize: '',
        width: 1000
      },
      animationDuration: 0,
      animationDurationUpdate: 300,
    },
    series: [{
      realtimeSort: true,
      name: '设备',
      type: 'bar',
      data: [148791, 225229, 145734, 687508, 37855, 196265],
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }],
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  },
  option4: {
    title: {
      text: '除了听课功能外，请问您还使用过线上教育平台的哪些功能？'
    },
    grid: {
      left: "15%",
    },
    tooltip: {},
    xAxis: {
      // max: 'dataMax',
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    yAxis: {
      inverse: true,
      data: ["回看课程视频", "作业提交", "随堂测试", "视频会议", "作业批改反馈", "课堂发言", "班级通知", "班级圈", "优秀作业查看", "线上学科竞赛游戏", "屏幕共享", "弹幕", "讨论"],
      axisLabel: {
        inside: false,
        color: '#000',
        fontSize: '18',
        itemSize: '',
        width: 1000
      }
    },
    series: [{
      realtimeSort: true,
      name: '功能',
      type: 'bar',
      data: [557989, 654907, 219099, 141649, 393322, 245514, 488749, 235836, 335654, 27269, 75918, 100375, 160749],
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }],
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  },
  option5: {
    title: {
      text: '学习线上课程时间最长的课时约为？',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [{
      name: '课时',
      type: 'pie',
      radius: '50%',
      data: [{
          value: 112486,
          name: '20分钟及以内'
        },
        {
          value: 206071,
          name: '20-30（含）分钟'
        },
        {
          value: 219694,
          name: '30-45（含）分钟'
        },
        {
          value: 261749,
          name: '45分钟以上'
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        fontSize: 18
      }
    }]
  },
  option6: {
    title: {
      text: '每天线上学习的时间多长？'
    },
    tooltip: {},
    xAxis: {
      data: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"],
      axisLabel: {
        inside: false,
        textStyle: {
          color: '#000',
          fontSize: '18',
          itemSize: ''
        }
      }
    },
    yAxis: {
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    series: [{
      name: '时间',
      type: 'bar',
      data: [2847, 39699, 84400, 136341, 91202, 76874, 118549, 52917, 47544, 50355, 26581, 9434, 19772, 6090, 3297, 34085],
      label: {
        show: true,
        position: "top"
      },
    }]
  },
  option7: {
    title: {
      text: '请问以下学习状态，哪一种符合您的情况？',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [{
      type: 'pie',
      radius: '75%',
      data: [{
          value: 285569,
          name: '能专心学习'
        },
        {
          value: 110383,
          name: '在监督陪伴下，能专心学习'
        },
        {
          value: 327641,
          name: '有时能专心学习，有时不能专心学习'
        },
        {
          value: 33024,
          name: '基本不能专心学习'
        },
        {
          value: 43383,
          name: '不适应线上学习'
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        fontSize: 18
      }
    }]
  },
  option8: {
    title: {
      text: '请问进行线上学习时，您是否需要家人陪伴？',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [{
      type: 'pie',
      radius: '75%',
      data: [{
          value: 423841,
          name: '完全不需要'
        },
        {
          value: 318934,
          name: '有时需要'
        },
        {
          value: 57225,
          name: '完全需要'
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        fontSize: 18
      }
    }]
  },
  option9: {
    title: {
      text: '喜欢的线上课堂组织形式是？'
    },
    grid: {
      left: "20%",
    },
    tooltip: {},
    xAxis: {
      // max: 'dataMax',
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    yAxis: {
      inverse: true,
      data: ["直播", "录播", "资源包", "电视课堂", "直播+录播", "直播+资源包", "录播+资源包", "直播+录播+资源包", "录播+资源包+线上辅导答疑"],
      axisLabel: {
        inside: false,
        color: '#000',
        fontSize: '18',
        itemSize: '',
        width: 1000
      }
    },
    series: [{
      realtimeSort: true,
      name: '课堂组织形式',
      type: 'bar',
      data: [412855, 186648, 107573, 170720, 172489, 101584, 71734, 149651, 283466],
      label: {
        show: true,
        position: "right",
        valueAnimation: true
      }
    }],
    animationDuration: 0,
    animationDurationUpdate: 300,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  },
  option10: {
    title: {
      text: '学习的线上课程内容包括？'
    },
    grid: {
      left: "20%",
    },
    tooltip: {},
    xAxis: {
      // max: 'dataMax',
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    yAxis: {
      inverse: true,
      data: ["学科课程新课", "学科课程复习", "音美体劳教育", "专题教育"],
      axisLabel: {
        inside: false,
        color: '#000',
        fontSize: '18',
        itemSize: '',
        width: 1000
      }
    },
    series: [{
      realtimeSort: true,
      name: '线上课程内容',
      type: 'bar',
      data: [689349, 547901, 318793, 356708],
      label: {
        show: true,
        position: "right",
        valueAnimation: true
      }
    }],
    animationDuration: 0,
    animationDurationUpdate: 300,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  },
  option11: {
    title: {
      text: '对于线上学习未掌握的知识点常用哪些办法解决？'
    },
    grid: {
      left: "20%",
    },
    tooltip: {},
    xAxis: {
      // max: 'dataMax',
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    yAxis: {
      inverse: true,
      data: ["查阅线上资源自主解决", "通过学习平台的视频回放", "教师集中时间线上答疑", "线上随时利用微信、钉钉\n等社交平台咨询教师", "同学互相交流", "暂时放下，待以后解决"],
      axisLabel: {
        inside: false,
        color: '#000',
        fontSize: '18',
        itemSize: '',
        width: 1000
      }
    },
    series: [{
      realtimeSort: true,
      name: '解决办法',
      type: 'bar',
      data: [389828, 568803, 225953, 291411, 271876, 80727],
      label: {
        show: true,
        position: "right",
        valueAnimation: true
      }
    }],
    animationDuration: 0,
    animationDurationUpdate: 300,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  },
  option12: {
    title: {
      text: '参与线上学习的课堂互动频率如何？',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [{
      name: '互动频率',
      type: 'pie',
      radius: '70%',
      data: [{
          value: 85088,
          name: '不回答问题'
        },
        {
          value: 336777,
          name: '偶尔参与回答问题'
        },
        {
          value: 158339,
          name: '大多数情况下能参与回答问题'
        },
        {
          value: 111365,
          name: '积极发言，回答问题'
        },
        {
          value: 108431,
          name: '课堂没有问答环节，没有机会回答'
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        fontSize: 18
      }
    }]
  },
  option13: {
    title: {
      text: '请问您线上学习时，遇到过哪些主要问题？'
    },
    grid: {
      left: "20%",
    },
    tooltip: {},
    xAxis: {
      // max: 'dataMax',
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    yAxis: {
      inverse: true,
      data: ["网络基础资源有限\n容易拥堵卡顿", "线上学习平台体验不好\n或功能受限", "与教师沟通不顺畅\n问题无法及时解答", "课后作业设置不合理", "课程资源质量欠佳", "长时间观看屏幕\n眼睛疲劳", "要求安装的软件平台\n过多，容易混淆", "环境干扰因素多\n难以集中学习"],
      axisLabel: {
        inside: false,
        color: '#000',
        fontSize: '18',
        itemSize: '',
        width: 1000
      }
    },
    series: [{
      realtimeSort: true,
      name: '主要问题',
      type: 'bar',
      data: [404044, 182685, 204563, 76694, 114946, 586142, 160882, 321906],
      label: {
        show: true,
        position: "right",
        valueAnimation: true
      }
    }],
    animationDuration: 0,
    animationDurationUpdate: 300,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  },
  option14: {
    title: {
      text: '关于以下线上学习行为，请在下面的表格中选出符合您情况的答案'
    },
    tooltip: {},
    xAxis: {
      data: ["是否回看课程视频", "是否认真学习\n老师提供的\n其他课程资料","是否开展居家\n自觉自学、自修活动","遇到问题时\n是否积极向老师提问", "线上完成作业的质量\n是否能够达到与\n线下一样的效果"],
      axisLabel: {
        inside: false,
        textStyle: {
          color: '#000',
          fontSize: '18',
          itemSize: ''
        }
      },
      offset: 4
    },
    yAxis: {
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    series: [{
      name: '是',
      type: 'bar',
      data: [692537, 721844, 620304, 485808, 537091],
      label: {
        show: true,
        position: "top"
      },
      barWidth : 45,
    }, {
      name: '否',
      type: 'bar',
      data: [107463, 78156, 179696, 314192, 262909],
      label: {
        show: true,
        position: "top"
      },
      barWidth : 45,
    }]
  },
  option15: {
    title: {
      text: '请问您认为线上教育培养了哪些能力？'
    },
    tooltip: {},
    xAxis: {
      data: ["自主学习能力", "自控能力", "数字化资源\n利用能力", "表达沟通", "生活实践", "其他"],
      axisLabel: {
        inside: false,
        textStyle: {
          color: '#000',
          fontSize: '18',
          itemSize: ''
        }
      },
      offset: 4
    },
    yAxis: {
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    series: [{
      name: '能力',
      type: 'bar',
      data: [611193, 460616, 270362, 197043, 209587, 100942],
      label: {
        show: true,
        position: "top"
      },
      barWidth : 60,
    }]
  },
  option16: {
    title: {
      text: '请问您对线上学习以下方面的满意度如何？'
    },
    tooltip: {},
    xAxis: {
      data: ["线上课堂录播\n方式的满意度", "教师线上教学的\n态度的满意度","教师线上教学\n水平效果的满\n意度","线上学习资源\n内容的满意度", "使用的线上学习\n平台的满意度", "线上学习的\n总体满意度"],
      axisLabel: {
        inside: false,
        textStyle: {
          color: '#000',
          fontSize: '18',
          itemSize: ''
        }
      },
      offset: 4
    },
    yAxis: {
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    series: [{
      name: '非常满意',
      type: 'bar',
      data: [178416, 175953, 275664, 254933, 193372, 179425, 182981],
      label: {
        show: true,
        position: "top"
      },
      barWidth : 30,
    }, {
      name: '满意',
      type: 'bar',
      data: [337052, 351834, 377832, 376479, 375925, 352768, 361522],
      label: {
        show: true,
        position: "top"
      },
      barWidth : 30,
    }, {
      name: '一般',
      type: 'bar',
      data: [258133, 247927, 134378, 154337, 214188, 242270, 232496],
      label: {
        show: true,
        position: "top"
      },
      barWidth : 30,
    }, {
      name: '不满意',
      type: 'bar',
      data: [26399, 24286, 12126, 14251, 16515, 25537, 23001],
      label: {
        show: true,
        position: "top"
      },
      barWidth : 30,
    },]
  },
  option17: {
    title: {
      text: '与实体课堂相比，您认为线上学习有什么优势？'
    },
    grid: {
      left: "20%",
    },
    tooltip: {},
    xAxis: {
      type: "value",
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      },
    },
    yAxis: {
      realtimeSort: true,
      inverse: true,
      data: ["能够听到更多名师优质课", "可以更加方便地回看、复习，帮助理解", "学习效果更好", "减轻了学习负担", "学习自觉性自主性增强", "可以随时随地学习", "其他"],
      axisLabel: {
        inside: false,
        color: '#000',
        fontSize: '18',
        itemSize: '',
        width: 1000
      },
      animationDuration: 0,
      animationDurationUpdate: 300,
    },
    series: [{
      realtimeSort: true,
      name: '促进线上学习方式',
      type: 'bar',
      data: [357186, 599242, 141127, 135298, 322212, 437337, 61111],
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }],
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  },
  option18: {
    title: {
      text: '与实体课堂相比，您认为线上学习的不足有哪些？'
    },
    grid: {
      left: "20%",
    },
    tooltip: {},
    xAxis: {
      type: "value",
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      },
    },
    yAxis: {
      realtimeSort: true,
      inverse: true,
      data: ["不如课堂教学效果好", "视频课程资源质量参差不齐", "学习负担加重", "缺乏师生互动", "其他"],
      axisLabel: {
        inside: false,
        color: '#000',
        fontSize: '18',
        itemSize: '',
        width: 1000
      },
      animationDuration: 0,
      animationDurationUpdate: 300,
    },
    series: [{
      realtimeSort: true,
      name: '促进线上学习方式',
      type: 'bar',
      data: [550263, 221961, 158548, 497429, 83543],
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }],
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  },
  option19: {
    title: {
      text: '请问您期待能够有哪些线上活动或体验促进线上学习？'
    },
    grid: {
      left: "20%",
    },
    tooltip: {},
    xAxis: {
      type: "value",
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      },
    },
    yAxis: {
      realtimeSort: true,
      inverse: true,
      data: ["老师实时视音频方式的互动、答疑", "线上小组讨论和合作", "增加专题教育的内容和课时", "线上随堂测试或考试", "智能推荐学习资源", "学习状态智能监测并反馈、提醒", "其他"],
      axisLabel: {
        inside: false,
        color: '#000',
        fontSize: '18',
        itemSize: '',
        width: 1000
      },
      animationDuration: 0,
      animationDurationUpdate: 300,
    },
    series: [{
      realtimeSort: true,
      name: '促进线上学习方式',
      type: 'bar',
      data: [437794, 303595, 226944, 261204, 262488, 266413, 80837],
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }],
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  },
  option20: {
    title: {
      text: '疫情结束后，您喜欢哪种学习模式？'
    },
    tooltip: {},
    xAxis: {
      data: ["以前的实体课堂\n学习模式", "实体课堂学习模式\n线上学习资源作为\n学习资源的补充", "线上线下混合式\n学习模式", "完全线上的\n学习模式"],
      axisLabel: {
        inside: false,
        textStyle: {
          color: '#000',
          fontSize: '18',
          itemSize: ''
        }
      }
    },
    yAxis: {
      axisLabel: {
        inside: false,
        fontSize: '18',
        itemSize: ''
      }
    },
    series: [{
      name: '学习模式',
      type: 'bar',
      data: [392835, 275724, 95077, 36364],
      label: {
        show: true,
        position: "top"
      },
      barWidth : 70,
    }]
  },
}




myChart.setOption(options.option18);
let item = document.querySelectorAll(".item");
item.forEach((item, index) => {
  item.addEventListener('click', function (e) {
    myChart.clear();
    myChart.setOption(options[e.path[1].id]);
  })
})